<template>
  <div class="flight_filter">
    <div class="flight_filter_row1">
      <div class="info">
        单程: {{filterInfo.departCity}} - {{filterInfo.destCity}} / {{filterInfo.departDate}}
      </div>
      <div class="filter_form">
        <el-select
          v-for="(item,index) in filterList"
          :key="index"
          v-model="selectValues[index]"
          :placeholder="item.placeholder"
          size="mini"
          class="filter_sele"
        >
          <el-option
            v-for="(item2,index2) in  item.list "
            :key="index2"
            :label="item2.label"
            :value="item2.value"
          >
          </el-option>
        </el-select>

      </div>
    </div>
    <div class="flight_filter_row2">
      <span>筛选:</span>
      <el-button
        size="mini"
        round
        type="primary"
        plain
        @click="selectValues=['','','','']"
      >撤销</el-button>
    </div>

  </div>
</template>

<script>
export default {
  // filterInfo 存放 出发信息   filterOptions 存放筛选数据
  props: ["filterInfo", "filterOptions"],
  mounted() {
    console.log(this.filterOptions);
    // list = [
    //   {
    //     placeHolder: "起飞机场",
    //     list: [{ value: "白云机场", label: "白云机场" }],
    //   },
    // ];
  },
  data() {
    return {
      // 4个筛选组件的值   为了让自己阅读代码方便 设定默认值
      selectValues: ["", "", "", ""],
      // selectValues: [],
    };
  },
  watch: {
    // 监控select组件的值的改变 通知父页面->数据筛选
    selectValues() {
      // 传递给父页面
      this.$emit("filterValueChange", this.selectValues);
    },
  },
  computed: {
    // 通过 对filterOptions 转化成 select标签能识别的数组格式
    filterList() {
      const list = [];
      // 添加机场数据
      list.push({
        placeholder: "起飞机场",
        list: this.filterOptions.airport.map((v) => ({ value: v, label: v })),
      });
      // 添加起飞时间
      list.push({
        placeholder: "起飞时间",
        list: this.filterOptions.flightTimes.map((v) => ({
          value: `${v.from}|${v.to}`,
          label: `${v.from}:00 - ${v.to}:00`,
        })),
      });
      // 添加航空公司
      list.push({
        placeholder: "航空公司",
        list: this.filterOptions.company.map((v) => ({ value: v, label: v })),
      });
      // 添加机型大小  在前端自己制定  大中小 值都是固定不变
      list.push({
        placeholder: "机型",
        list: [
          { label: "大", value: "L" },
          { label: "中", value: "M" },
          { label: "小", value: "S" },
        ],
      });

      return list;
    },
  },
};
</script>

<style lang="less" scoped>
.flight_filter {
  .flight_filter_row1 {
    padding: 10px 0;
    display: flex;
    justify-content: space-between;
    .info {
      font-size: 13px;
    }
    .filter_form {
    }
  }
  .flight_filter_row2 {
    display: flex;
    align-items: center;
    font-size: 13px;
    span {
      margin-right: 10px;
    }
  }
}
.filter_sele {
  width: 120px;
  margin-left: 10px;
}
</style>